.xy-container,
.multixy-container,
.rgb-container,
.canvas-container {
    width: 200rem;
    height: 200rem;
}

.xy-container, .multixy-container {

    --alpha-fill-off: 0.05;
    --alpha-fill: var(--alpha-fill-off);
    --widget-padding: 20rem;

    inner {
        position: relative;
        flex: 1;
        display: flex;

        @include pseudo-fill($z: -1);
        @include pseudo-stroke();
    }

    canvas {
        width: 100%;
        text-align: center;
    }

}

.multixy-container {

    --point-size: 20rem;

    canvas {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        pointer-events: none;
    }

}

.rgb-container {

    --widget-padding: 4rem;

    > inner {

        display: grid;

        @include pseudo-stroke($z: 1);

        --widget-spacing: calc(var(--widget-padding) / 2);

        padding: calc(var(--line-width) + var(--widget-spacing));

        grid-template:
            "a a b" auto / 1fr;

    }

    &.contains-alpha > inner {
        grid-template:
            "a a b" auto
            "c c c" calc(20rem + var(--widget-spacing) * 2) / 1fr;
    }

    .widget {
        height: auto;
        width: auto;
        margin: var(--widget-spacing);
        --widget-padding: 2rem;
        --line-width: 0;
    }

    .pad {
        grid-area: a;

        background-color: red;
        background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%), linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
        --color-fill: black;
        --color-stroke: white;
        --alpha-fill-off: 1;
        --alpha-fill-on: 1;
        --alpha-stroke: 1;
        inner {
            &:after, &:before {
                content: none;
            }
        }
    }

    .hue {
        grid-area: b;
        width: 20rem;

        --color-fill: white;
        // --color-stroke: white;
        --alpha-fill-off: 0.5;
        --alpha-fill-on: 0;
        --alpha-stroke: 0;
        --widget-padding: 0rem;

        &:after {
            content:"";
            position: absolute;
            top: 0;
            left: 2rem;
            right: 2rem;
            bottom: 0;
            background: linear-gradient(to bottom, #F00, #FF0080, #F0F, #8000FF, #00F, #0080FF, #0FF, #00FF80, #0F0, #80FF00, #FF0, #FF8000, #F00) repeat scroll 0% 0%;
            opacity: 0.75;
            z-index: -1;
        }
    }

    .alpha {
        grid-area: c;
        height: auto!important;
        width: auto!important;
        --alpha-stroke: 0;
        --alpha-fill-off: 0.1;
        --alpha-fill-on: 0.25;
        --widget-padding: 0rem;
    }

}


.canvas-container {

   --alpha-fill-off: 0.05;
   --alpha-fill-on: 0.75;
   --alpha-fill: var(--alpha-fill-off);
   --widget-padding: 0rem;
   .html {
       pointer-events: auto;
   }

   inner {
       position: relative;
       flex: 1;
       display: flex;

       @include pseudo-fill($z: -1);
       @include pseudo-stroke();
   }

   canvas {
       width: 100%;
       text-align: center;
   }

}
